<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>H5的拖拽效果实例</title>
</head>
<style>
	#box{
		height: 200px;
		width: 200px;
		border: 1px solid orange;
		float: left;
	}
	
	#con{
		height: 200px;
		width: 200px;
		border: 1px solid green;
		margin: 0;
		padding: 0;
		float: left;
	}
	li{
		height: 30px;
		width: 200px;
		background-color: #abcdef;
		list-style: none;
		text-align: center;
		margin: 10px 0;
	}
</style>
<body>
	<div id="box">
		选中
	</div>
	<ul id="con">
		未选中
		<li>鸡肉卷</li>
		<li>汉堡包</li>
		<li>肉夹馍</li>
		<li>烤冷面</li>
	</ul>
</body>
<script>
	var box = document.getElementById('box');
	var con = document.getElementById('con');
	var lis = document.getElementsByTagName('li');
 
	for (var i = 0; i < lis.length; i++) {
		lis[i].draggable = true; //每个li都设置可拖拽属性
		lis[i].flag = false;
 
		lis[i].ondragstart = function(){
			this.flag = true; //鼠标拖拽li时设置flag为true
		}
		lis[i].ondragend = function(){
			this.flag = false;
		}
	};
 
	box.ondragenter = function(e) {
		// e.preventDefault();
	}
 
	box.ondragover = function(e) {
		e.preventDefault(); //阻止默认事件，否则不会触发ondrop事件
	}
 
	box.ondragleave = function(e) {
		// e.preventDefault();
	}
 
	box.ondrop = function(e) {
		// e.preventDefault();
 
		for (var i = 0; i < lis.length; i++) {
			if(lis[i].flag){ //如果flag为真，则添加一个li至box里
				box.appendChild(lis[i]);
				
			}
		};
	}
 
 
	con.ondragenter = function(e) {
		// e.preventDefault();
	}
 
	con.ondragover = function(e) {
		e.preventDefault(); //阻止默认事件，否则不会触发ondrop事件
	}
 
	con.ondragleave = function(e) {
		// e.preventDefault();
	}
 
	con.ondrop = function(e) {
		e.preventDefault();
 
		for (var i = 0; i < lis.length; i++) {
			if(lis[i].flag){ //如果flag为真，则添加一个li至box里
				
				con.appendChild(lis[i]);
				
			}
		};
	}
 
 
</script>
</html>
